<template>
  <div>
    <BasicTable @register="registerTable">
      <template #orderNo="{ record }">
        <Row :gutter="[24, 24]" class="order-no">
          <Col :span="4">
            <Tag color="blue">渠道</Tag>
          </Col>
          <Col :span="20">
            <Tooltip placement="topLeft">
              <template #title>
                <span>{{ record.orderNo }}</span>
              </template>
              <div class="order-no-data">{{ record.orderNo }}</div>
            </Tooltip>
          </Col>
        </Row>
        <Row :gutter="[24, 24]">
          <Col :span="4">
            <Tag color="green">平台</Tag>
          </Col>
          <Col :span="20">
            <Tooltip placement="topLeft">
              <template #title>
                <span>{{ record.channelOrderNo }}</span>
              </template>
              <div class="order-no-data">{{ record.channelOrderNo }}</div>
            </Tooltip>
          </Col>
        </Row>
      </template>
    </BasicTable>
    <FormDetail @register="registerFormDetail" />
  </div>
</template>
<script lang="ts" name="ChannelBill" setup>
  import { ref } from "vue"
  import { Tag, Row, Col, Tooltip } from "ant-design-vue"
  import { Auth } from "/@/enums/authEnum"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { usePermission } from "/@/hooks/web/usePermission"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, searchFormSchema } from "./data"
  import { pageChannelBill } from "/@/api/pay"
  import { useMessage } from "/@/hooks/web/useMessage"
  import FormDetail from "./Detail.vue"
  import { useRouter } from "vue-router"
  import { Icon } from "/@/components/Icon"

  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const glob = useGlobSetting()
  const { isDisabledAuth } = usePermission()
  const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()

  const actionColumn: BasicColumn = {
    width: 130,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "详情",
        onClick: handleDetail.bind(null, record),
      },
    ],
    dropDownActions: (record: Recordable) => [],
  }

  const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
    title: "渠道账单",
    api: pageChannelBill,
    columns: columns,
    bordered: false,
    beforeFetch: (params) => {
      return params
    },
    formConfig: {
      baseColProps: { lg: 6, md: 12 },
      labelWidth: 90,
      schemas: searchFormSchema,
      showResetButton: false,
      fieldMapToTime: [["billDate", ["beginDate", "endDate"], "YYYY-MM-DD"]],
    },
    showTableSetting: true,
    useSearchForm: true,
    showIndexColumn: false,
    pagination: true,
    canResize: true,
    rowKey: "id",
    actionColumn,
  })

  const handleDetail = (record) => openFormDetail(true, { record })
  const handleSuccess = () => reload()
</script>

<style lang="less" scope>
  .order-no {
    margin-bottom: 4px;
  }
  .order-no-data {
    text-align: left;
    border: 1px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 8px;
    text-overflow: ellipsis;
  }
</style>
